<template>
	<div>
		<!-- 发车弹窗 -->
		<uni-popup ref="departDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认发车" title="运单发车"
				@confirm="departDialogConfirm">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 300px;">
					<uni-forms ref="form" :modelValue="formData"  labelWidth="75px">
						<uni-forms-item label="发车批次">
							<view style="display: flex;align-items: center;height: 36px;">
								<text style="font-weight: bold;">{{formData.scheduleNo}}</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="司机姓名">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData.scheduleVo.driverVo.driverName}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="联系电话">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData.scheduleVo.driverVo.phoneNumber}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="身份证号">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData.scheduleVo.driverVo.idCardNo}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="车型">
							<view style="display: flex;align-items: center;height: 36px;">
								{{carType_[formData.scheduleVo.carVo.carType]}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="车牌号">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData.scheduleVo.carVo.licensePlate}}
							</view>
						</uni-forms-item>
						<!-- <uni-forms-item label="挂车牌号">
							<view style="display: flex;align-items: center;height: 36px;">
								<text style="font-weight: bold;">{{formData.scheduleVo}}</text>
							</view>
						</uni-forms-item> -->
						<uni-forms-item label="发车时间" >
							<view style="display: flex;align-items: center;height: 36px;">
								{{getNowTime}}
							</view>
						</uni-forms-item>
						<view style="display: flex;align-items: center;">
							<uni-table ref="table"  border stripe  emptyText="暂无更多数据">
								<uni-tr>
									<uni-th  align="center">运单编号</uni-th>
									<uni-th  align="center">货物名称</uni-th>
									<uni-th  align="center">数量（件）</uni-th>
									<uni-th  align="center">重量（吨）</uni-th>
									<uni-th  align="center">体积（立方）</uni-th>
									<uni-th  align="center">发货地址</uni-th>
									<uni-th  align="center">收货地址</uni-th>
								</uni-tr>
								<uni-tr v-for="(item, index) in waybillList" :key="index">
									<uni-td align="center">{{ item.outCode }}</uni-td>
									<uni-td align="center">{{ item.goodSourceList.map(i => i.goodsName).join(", ") }}</uni-td>
									<uni-td align="center">{{ item.goodSourceList.reduce((total, i) => total + Number(i.num), 0) }}</uni-td>
									<uni-td align="center">{{ item.goodSourceList.reduce((total, i) => total + Number(i.weight), 0) }}</uni-td>
									<uni-td align="center">{{ item.goodSourceList.reduce((total, i) => total + Number(i.bulk), 0) }}</uni-td>
									<uni-td align="center">{{ item.shipDistrictName }}</uni-td>
									<uni-td align="center">{{ item.deliveryDistrictName }}</uni-td>
								</uni-tr>
							</uni-table>
						</view>
						<view style="height: 20px;"></view>
						<uni-forms-item label="相关资料">
							<myfilepicker :limit="2" :imageStyles="imageStyles" :fileIdString="outboundAttach" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_outboundAttach"
						    		:title="'*点击上传出库单，支持png/jpg/jpeg，最多可上传2个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>出库单</myfilepicker>
							<view style="margin-top: 10px;">
								<myfilepicker :limit="3" :imageStyles="imageStyles" :fileIdString="billAttach" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_billAttach"
										:title="'*点击上传附件，支持png/jpg/jpeg，最多可上传3个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>附件</myfilepicker>
						    </view>
						</uni-forms-item>
						<view style="height: 50px;"></view>
					</uni-forms>
					<!-- <uni-forms ref="form" :modelValue="formData_depart"  :rules="rules_depart" labelWidth="75px">
						<uni-forms-item label="发车批次">
							<view style="display: flex;align-items: center;height: 36px;">
								<text style="font-weight: bold;">{{formData.scheduleNo}}</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="司机姓名" required>
							<uni-easyinput type="text" v-model="formData_depart.name" placeholder="请输入司机姓名" />
						</uni-forms-item>
						<uni-forms-item label="联系电话" required>
							<uni-easyinput type="number" v-model="formData_depart.tel" placeholder="请输入联系电话" />
						</uni-forms-item>
						<uni-forms-item label="身份证号" required>
							<uni-easyinput type="text" v-model="formData_depart.idCard" placeholder="请输入身份证号" />
						</uni-forms-item>
						<uni-forms-item label="车型" required>
							<uni-data-select v-model="formData_depart.carType" :localdata="carType"
								style="background-color: white;" />
						</uni-forms-item>
						<uni-forms-item label="车牌号" required>
							<uni-easyinput type="text" v-model="formData_depart.carNumber" placeholder="请输入车牌号" />
						</uni-forms-item>
						<uni-forms-item label="挂车牌号">
							<uni-easyinput type="text" v-model="formData_depart.hangCarNumber" placeholder="请输入车牌号" />
						</uni-forms-item>
						<uni-forms-item label="发车时间" >
							<uni-datetime-picker type="date" v-model="formData_depart.departTime" />
						</uni-forms-item>
						<uni-forms-item label="相关资料">
							<uni-file-picker limit="1" disable-preview :imageStyles="imageStyles" style="background-color: white;"
												file-mediatype="image"><uni-icons type="cloud-upload" size="18"></uni-icons>驾驶证</uni-file-picker>
							
							<view style="margin-top: 10px;">
								<uni-file-picker limit="2" disable-preview :imageStyles="imageStyles" style="background-color: white;"
													file-mediatype="image"><uni-icons type="cloud-upload" size="18"></uni-icons>行驶证(2张)</uni-file-picker>
							</view>
							
							<view style="margin-top: 10px;">
								<uni-file-picker limit="3" disable-preview :imageStyles="imageStyles" style="background-color: white;"
													file-mediatype="image"><uni-icons type="cloud-upload" size="18"></uni-icons>人、车头</uni-file-picker>
							</view>
						    <view style="margin-top: 10px;">
						    	<uni-file-picker limit="2" disable-preview :imageStyles="imageStyles" style="background-color: white;"
						    						file-mediatype="image"><uni-icons type="cloud-upload" size="18"></uni-icons>身份证(正反2张)</uni-file-picker>
						    </view>
							
						</uni-forms-item>
						<view style="height: 50px;"></view>
					</uni-forms> -->
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 取消发车弹窗 -->
		<uni-popup ref="cancelDepartDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title="运单取消发车"
				@confirm="cancelDepartDialogConfirm">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 300px;">
					<uni-forms ref="form" :modelValue="formData"  labelWidth="75px">
						<uni-forms-item label="发车批次">
							<view style="display: flex;align-items: center;height: 36px;">
								<text style="font-weight: bold;">{{formData.scheduleNo}}</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="司机姓名">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData.scheduleVo.driverVo.driverName}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="联系电话">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData.scheduleVo.driverVo.phoneNumber}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="身份证号">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData.scheduleVo.driverVo.idCardNo}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="车型">
							<view style="display: flex;align-items: center;height: 36px;">
								{{carType_[formData.scheduleVo.carVo.carType]}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="车牌号">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData.scheduleVo.carVo.licensePlate}}
							</view>
						</uni-forms-item>
					</uni-forms>
					<view style="display: flex;margin-top: 10px;color: #bf5f09;">
						<text>*确认取消当前运单{{formData.scheduleNo}}发车</text>
					</view>
					<view style="height: 50px;"></view>
					</uni-forms>
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	import {
		waybillDepart,
		cancelWaybillDepart,
		updateWayBillProfile
	} from '@/api/system/waybill.js'
	import {getDicts} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	export default {
		components: {
			myfilepicker
		},
		props: {
			data: {
				type: Object,
				default: {}
			},
			carType_:{
				type: Array,
				default:[]
			},
		},
		data() {
			return {
				formData:{
					scheduleNo:''
				},
				formData_depart: {
					name: '',
					tel: '',
					idCard: '',
					carType: '',
					carNumber:'',
					hangCarNumber:'',
					departTime:''
				},
				//发车时间
				getNowTime:'',
				// 校验规则->发车
				rules_depart: {
					loadUserName: {
						rules: [{
							required: true,
							errorMessage: '请输入装货人',
						}]
					},
					contactPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						},
						{
						    pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
						    errorMessage: '电话格式不正确'
						}
						]
					},
					cost: {
						rules: [{
							required: true,
							errorMessage: '请输入装货费',
						}]
					},
					allocationMethod: {
						rules: [{
							required: true,
							errorMessage: '请选择分摊方式',
						}]
					}
				},
				
				//当前车次运单列表
				waybillList:[],
				imageStyles: {
					width: '100%',
					height: 150,
					border: {
						radius: '4px'
					}
				},
				outboundAttach:'',
				billAttach:'',
			}
		},
		watch: {
			data: {
			　　handler(newValue, oldValue) {
			　　　	this.formData=newValue
					this.waybillList.push(this.formData)
			　　},
			　　deep: true
			},
		},
		methods: {
			//接收文件传递的id字符串集合
			getFileIdString_outboundAttach(fileIds){
				this.formData.outboundAttach=fileIds
			},
			//接收文件传递的id字符串集合
			getFileIdString_billAttach(fileIds){
				this.formData.billAttach=fileIds
			},
			//获取当前时间
			getNowDateTime(){
				const date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				// var hour = date.getHours()<10?('0'+date.getHours()):date.getHours();
				// var minute = date.getMinutes()<10?('0'+date.getMinutes()):date.getMinutes();
				// var second = date.getSeconds()<10?('0'+date.getSeconds()):date.getSeconds();
				// this.getNowTime=year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
				var hour = date.getHours()<10?('0'+date.getHours()):date.getHours();
				var minute = date.getMinutes()<10?('0'+date.getMinutes()):date.getMinutes();
				var second = date.getSeconds()<10?('0'+date.getSeconds()):date.getSeconds();
				this.getNowTime=year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
			},
			//发车
			depart(){
				this.$refs.departDialog.open()
				this.$nextTick(()=>{
					this.outboundAttach=this.formData.outboundAttach
					this.billAttach=this.formData.billAttach
				})
				this.getNowDateTime()
			},
			//确认发车
			departDialogConfirm(){
				uni.showLoading({
					title: '正在发车...',
				})
				//上传出库单、附件
				updateWayBillProfile({waybillId:this.formData.waybillId,outboundAttach:this.formData.outboundAttach,billAttach:this.formData.billAttach}).then(res => {
					if (res.code == '200') {
						//发车完成
						waybillDepart(this.formData.scheduleNo).then(res2 => {
							uni.hideLoading()
							if (res2.code == '200') {
								uni.showToast({
									title: '发车成功',
									icon: 'none'
								})
						
								this.$parent.init()  //调用父组件的init函数，重新加载数据
								//this.$forceUpdate(); //重新加载数据
							} else {
								uni.showToast({
									icon: 'none',
									title: res2.msg
								})
							}
						})
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//取消发车
			cancleDepart(){
				this.$refs.cancelDepartDialog.open()
			},
			//确认取消发车
			cancelDepartDialogConfirm(){
				uni.showLoading({
					title: '正在取消发车...',
				})
				cancelWaybillDepart(this.formData.scheduleNo).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						uni.showToast({
							title: '取消发车成功',
							icon: 'none'
						})
						
						this.$parent.init()  //调用父组件的init函数，重新加载数据
						//this.$forceUpdate(); //重新加载数据
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
		},
	}
</script>

<style scoped>

</style>